<template>
    <div>
        <div>模板语法</div>
        <div>--------------------data------------------</div>
        <div>{{ msg }}</div>

        <div>----------------模板中直接嵌入js代码-----------------</div>
        <div>{{ m+1 }}</div>

        <div>-----------------指令 v-html-----------------</div>
        <div v-html='rawHtml'></div>

        <div>-----------------指令 v-bind-----------------</div>
        <div v-bind:class="red"></div>
        <div @click = "change">修改颜色</div>

        <div>-----------------指令 v-on-----------------</div>
        <div v-on:click = "say('hi')">点击我</div>

        <div>-----------------过滤器-----------------</div>
        <div>{{ message | capitalize }}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'helloworld',
            m:2,
            rawHtml:'<span>22222</span>',
            red:'red active',
            message:'message'
        }
    },
    methods:{
        change(){
            this.red = "yellow";
        },
        say(h) {
            alert(h);
        }
    },
    filters:{
        capitalize(){ // 修改数据
            return '123';
        }
    }
}
</script>








